<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .box1 {
                width: 200px;
                height: 200px;
                /*background-color: #bfa;*/
                /*
                    通过渐变可以设置一些复杂的背景颜色,可以实现从一个颜色向其它颜色过渡的效果
                        渐变是图片,需要通过background-image来设置

                    线性渐变,颜色沿着一条直线发生变化
                        linear-gradient()

                        linear-gradient(red, yellow) 从上向下渐变,红色在开头,黄色在结尾,中间是过渡区域

                            - 线性渐变的开头,我们可以指定一个渐变的方向
                                to left
                                to right
                                to bottom
                                to top

                                xxxdeg  deg表示度数
                                turn 表示圈

                            - 渐变可以同时指定多个颜色,多个颜色默认情况下平均分配
                */

                /*background-image: linear-gradient(to right, red, yellow);*/
                background-image: linear-gradient(90deg, red, yellow);
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
    </body>
</html>